﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    <style>
       
        .mini-panel.max
        {
            position:fixed !important;
            width:100% !important;
            height:100% !important;
            left:0 !important;
            top:0 !important;
            z-index:10000;
        }
        
    </style>
</head>
<body>

<div style="">
    <table style="width:100%;table-layout:fixed;">
        <tr>
            <td style="width:33%;">
                <div id="p1" class="mini-panel" title="panel1" style="width:100%;height:200px;"
                    buttons="collapse max close" onbuttonclick="onbuttonclick"
                >
                    <button type="button" onclick="restorePanel('p1')">restore</button>
                    <button type="button" onclick="maxPanel('p1')">max</button>
                </div>
            </td>
            <td style="width:33%;">
                <div id="p2" class="mini-panel" title="panel2" style="width:100%;height:200px;"
                    buttons="max" onbuttonclick="onbuttonclick"
                >
                    <button type="button" onclick="restorePanel('p2')">restore</button>
                    <button type="button" onclick="maxPanel('p2')">max</button>
                </div>
            </td>
            <td style="width:33%;">
                <div title="panel3" class="mini-panel" style="width:100%;height:200px;"
                    buttons="max" onbuttonclick="onbuttonclick"
                >
                </div>
            </td>
        </tr>
        <tr>
            <td >
                <div title="panel4" class="mini-panel"  style="width:100%;height:200px;"
                    buttons="max" onbuttonclick="onbuttonclick"
                >
                </div>
            </td>
            <td colspan="2">
                <div title="panel5" class="mini-panel" style="width:100%;height:200px;"
                    buttons="max" onbuttonclick="onbuttonclick"
                >
                </div>
            </td>
 
        </tr>
    </table>

</div>

</body>
</html>
<script>

    function maxPanel(id) {
        var panel = mini.get(id);
        panel.maxed = true;
        $(panel.el).addClass("max");        
        $(panel.el).find(".mini-tools-max").addClass("mini-tools-restore");
        mini.layout();
    }

    function restorePanel(id) {
        var panel = mini.get(id);
        panel.maxed = false;
        $(panel.el).find(".mini-tools-max").removeClass("mini-tools-restore");
        $(panel.el).removeClass("max");
        mini.layout();
    }

    function onbuttonclick(e) {
        var panel = this;

        if (e.name == "max") {
            if (panel.maxed) {
                restorePanel(panel);
            } else {
                maxPanel(panel);
            }
        }

    }
    
</script>
